<template>
  <div class="main">
    <div class="banner-box">
      <el-carousel>
        <el-carousel-item v-for="item in bannerDatas" :key="item.actionUrl">
          <el-image
            :src="item.image"
            @click="goToSearch(item.name)"
            fits="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>

      <div class="card border-shadow">
        <div class="card-content">
          <div class="home-nav">
            <div class="nav">
              <a href="/list?category=热门电影" rel="noreferrer">
                <div class="nav-block">
                  <svg
                    id="bili-cinephile"
                    viewBox="0 0 1024 1024"
                    class="home-icon"
                  >
                    <path
                      d="M147.2 201.728m79.616 0l571.136 0q79.616 0 79.616 79.616l0 458.24q0 79.616-79.616 79.616l-571.136 0q-79.616 0-79.616-79.616l0-458.24q0-79.616 79.616-79.616Z"
                      fill="#9796ED"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M222.976 269.312h77.056v57.856H222.976zM390.144 269.312h77.056v57.856h-77.056zM557.312 269.312h77.056v57.856h-77.056zM724.48 269.312h77.056v57.856H724.48zM222.976 693.76h77.056v57.856H222.976zM390.144 693.76h77.056v57.856h-77.056zM557.312 693.76h77.056v57.856h-77.056zM147.2 375.296h730.368v270.05H147.2z"
                      fill="#7B78EA"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M521.369822 529.707066m23.351494-23.351495l2.534271-2.53427q23.351494-23.351494 46.702989 0l199.664327 199.664327q23.351494 23.351494 0 46.702989l-2.534271 2.534271q-23.351494 23.351494-46.702988 0l-199.664328-199.664328q-23.351494-23.351494 0-46.702989Z"
                      fill="#FFD043"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M708.352 418.816h-25.6v-24.32a13.568 13.568 0 0 0-13.568-13.568H665.6a13.312 13.312 0 0 0-13.312 13.568v24.32h-25.6a13.568 13.568 0 0 0-13.568 13.568v5.632a13.568 13.568 0 0 0 13.568 13.568h25.6v24.32a13.312 13.312 0 0 0 13.312 13.568h5.632a13.568 13.568 0 0 0 13.568-13.568v-24.32h25.6a13.312 13.312 0 0 0 13.312-13.568v-5.632a13.312 13.312 0 0 0-15.36-13.568zM517.888 418.816h-25.6v-24.32a13.312 13.312 0 0 0-13.312-13.568h-5.632a13.568 13.568 0 0 0-13.568 13.568v24.32H435.2a13.312 13.312 0 0 0-13.312 13.568v5.632a13.312 13.312 0 0 0 13.312 13.568h25.6v24.32a13.568 13.568 0 0 0 13.568 13.568h5.632a13.312 13.312 0 0 0 13.312-13.568v-24.32h25.6a13.312 13.312 0 0 0 13.312-13.568v-5.632a13.312 13.312 0 0 0-14.336-13.568zM493.568 572.16h-18.432v-18.432a10.24 10.24 0 0 0-10.24-10.24H460.8a10.24 10.24 0 0 0-10.24 10.24v18.432h-18.432a10.24 10.24 0 0 0-10.24 10.24v4.352a10.24 10.24 0 0 0 10.24 10.24h18.432V614.4a10.24 10.24 0 0 0 10.24 10.24h4.352a10.24 10.24 0 0 0 10.24-10.24v-18.432h18.432a10.24 10.24 0 0 0 10.24-10.24v-4.352a10.24 10.24 0 0 0-10.496-9.216z"
                      fill="#FFD778"
                      class="jsx-907561223"
                    ></path>
                  </svg>
                  <div class="nav-title">电 影</div>
                </div>
              </a>
            </div>
            <div class="nav">
              <a href="/list?category=热播新剧" rel="noreferrer">
                <div class="nav-block">
                  <svg
                    id="icon-teleplay"
                    viewBox="0 0 1024 1024"
                    class="home-icon"
                  >
                    <path
                      d="M271.616 247.808a212.224 212.224 0 0 0-49.664 172.8l25.6 126.72c56.832 21.76 60.16 87.552 67.328 149.248a1167.872 1167.872 0 0 1 190.208-14.08 1247.488 1247.488 0 0 1 196.096 14.08c7.68-61.696 4.352-126.72 59.904-148.736l25.6-128a211.712 211.712 0 0 0-49.92-172.288 218.624 218.624 0 0 0-165.12-74.752h-134.912a218.624 218.624 0 0 0-165.12 74.752"
                      fill="#FFB161"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M505.088 412.672l-34.816-34.56a19.456 19.456 0 0 0-27.392 27.392l25.6 25.6-25.6 25.6a19.456 19.456 0 0 0 27.392 27.392l34.816-34.56 35.072 34.56a18.688 18.688 0 0 0 13.568 5.632 19.456 19.456 0 0 0 13.824-33.024l-25.6-25.6 25.6-25.6a19.456 19.456 0 0 0-13.824-33.024 18.688 18.688 0 0 0-13.568 5.632z"
                      fill="#FFE494"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M822.016 482.56a130.816 130.816 0 0 0-133.888 128v68.864l-368.128 1.536v-69.376a130.304 130.304 0 0 0-120.32-128h-13.568A81.92 81.92 0 0 0 102.4 563.2a76.8 76.8 0 0 0 0 13.312 79.104 79.104 0 0 0 38.912 54.784l8.96 4.352h2.304a25.6 25.6 0 0 1 15.36 22.016v63.744a112.384 112.384 0 0 0 80.896 105.472 51.2 51.2 0 0 0 98.816 5.888h313.088a51.2 51.2 0 0 0 98.816-5.888 112.384 112.384 0 0 0 79.104-105.472V650.752a25.6 25.6 0 0 1 8.192-11.52h1.536l4.608-2.816a80.384 80.384 0 0 0 51.2-61.44v-12.032a81.92 81.92 0 0 0-83.712-79.616"
                      fill="#FB952C"
                      class="jsx-907561223"
                    ></path>
                  </svg>
                  <div class="nav-title">剧 集</div>
                </div>
              </a>
            </div>
            <div class="nav">
              <a href="/list?category=热播动漫" rel="noreferrer">
                <div class="nav-block">
                  <svg
                    id="icon-anime"
                    viewBox="0 0 1024 1024"
                    class="home-icon"
                  >
                    <path
                      d="M588.8 359.68l-12.032-7.424 150.272-206.592a30.976 30.976 0 0 0-51.2-36.352l-153.6 210.176L281.6 170.24a30.976 30.976 0 1 0-33.024 52.736L486.4 369.92l-22.784 31.488a30.976 30.976 0 1 0 51.2 36.352l25.6-35.072 16.128 9.728A30.976 30.976 0 1 0 588.8 359.68z"
                      fill="#FB813A"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M763.648 850.688m-53.248 0a53.248 53.248 0 1 0 106.496 0 53.248 53.248 0 1 0-106.496 0Z"
                      fill="#FB813A"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M261.12 797.44a53.248 53.248 0 1 0 53.504 53.248 53.248 53.248 0 0 0-53.504-53.248z"
                      fill="#FB813A"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M141.312 314.368m92.928 0l556.288 0q92.928 0 92.928 92.928l0 360.704q0 92.928-92.928 92.928l-556.288 0q-92.928 0-92.928-92.928l0-360.704q0-92.928 92.928-92.928Z"
                      fill="#FDDE80"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M520.448 575.232m-128.256 0a128.256 128.256 0 1 0 256.512 0 128.256 128.256 0 1 0-256.512 0Z"
                      fill="#FFFFFF"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M476.928 546.56c0-26.88 19.2-37.632 42.24-25.6l49.664 28.672a25.6 25.6 0 0 1 0 48.64l-49.664 28.672c-23.04 13.568-42.24 2.56-42.24-24.32z"
                      fill="#FB813A"
                      class="jsx-907561223"
                    ></path>
                  </svg>
                  <div class="nav-title">动 漫</div>
                </div>
              </a>
            </div>
            <div class="nav">
              <a href="/list?category=热播综艺" rel="noreferrer">
                <div class="nav-block">
                  <svg id="icon-ent" viewBox="0 0 1024 1024" class="home-icon">
                    <path
                      d="M534.442796 378.982175m36.203867 36.203867l30.592268 30.592268q36.203867 36.203867 0 72.407734l-360.590518 360.590518q-36.203867 36.203867-72.407734 0l-30.592268-30.592268q-36.203867-36.203867 0-72.407735l360.590518-360.590517q36.203867-36.203867 72.407734 0Z"
                      fill="#FF8693"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M369.92 543.744l137.472-137.472a38.912 38.912 0 0 1 54.528 0l48.384 48.64a38.4 38.4 0 0 1 0 54.528l-137.984 137.984z"
                      fill="#FC6376"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M286.133941 631.021801m12.854616 12.85013l72.601422 72.576083q12.854616 12.850129 0.004486 25.704746l-1.62889 1.629458q-12.850129 12.854616-25.704745 0.004486l-72.601422-72.576083q-12.854616-12.850129-0.004486-25.704745l1.62889-1.629459q12.850129-12.854616 25.704745-0.004486Z"
                      fill="#FFA9B1"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M737.024 547.584a99.328 99.328 0 0 1 62.72-62.72l51.2-13.568a27.136 27.136 0 0 0 13.056-49.664L826.624 384a98.816 98.816 0 0 1-22.784-85.76l16.896-63.232c7.168-27.136-8.96-43.52-36.096-36.096l-63.232 16.896a98.816 98.816 0 0 1-85.76-23.04l-37.376-36.864a27.136 27.136 0 0 0-49.408 13.312l-13.824 51.2a97.792 97.792 0 0 1-62.464 62.72l-51.2 13.824a27.136 27.136 0 0 0-13.312 49.408L445.44 384a97.536 97.536 0 0 1 23.04 85.504l-16.896 63.232c-7.424 27.392 8.96 43.52 36.096 36.352l63.232-16.896a97.792 97.792 0 0 1 85.76 22.784l37.376 37.376a26.88 26.88 0 0 0 49.408-13.312z"
                      fill="#FDDE80"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M886.272 417.536l-74.752-75.008 30.464-114.432a41.216 41.216 0 0 0-8.704-41.472A41.728 41.728 0 0 0 791.808 179.2l-114.432 30.72-74.752-76.032A41.728 41.728 0 0 0 563.2 120.576a41.216 41.216 0 0 0-28.416 31.488l-27.392 102.4L404.48 281.6a42.24 42.24 0 0 0-31.744 28.16 42.24 42.24 0 0 0 13.312 40.448L460.8 425.216l-30.72 114.432a41.728 41.728 0 0 0 8.96 41.472 37.888 37.888 0 0 0 27.392 10.752 56.832 56.832 0 0 0 14.08-2.048l114.432-30.72 74.752 75.008a45.824 45.824 0 0 0 31.232 14.336 34.304 34.304 0 0 0 8.96 0 41.216 41.216 0 0 0 28.416-31.488l27.392-102.4 102.4-27.392a41.984 41.984 0 0 0 31.488-28.416 40.96 40.96 0 0 0-13.312-41.216z m-84.736-203.52h5.12a16.896 16.896 0 0 1 0 5.12l-25.6 93.696-72.96-73.728z m-32 139.776l-34.56 128-128 34.56-102.4-102.4 34.56-128 128-34.56z m-199.424-192c0-2.56 1.792-4.096 1.792-4.608a9.984 9.984 0 0 1 4.096 3.072l59.648 59.648-87.296 23.296z m-157.696 162.048L409.6 320a12.8 12.8 0 0 1 4.864-2.048l81.152-21.76-23.552 87.808z m58.368 230.4a18.944 18.944 0 0 1-5.12 0 17.92 17.92 0 0 1 0-5.12l25.6-93.696L563.2 528.64z m230.4 51.2c0 2.816-1.536 4.096-1.536 4.864a20.992 20.992 0 0 1-4.352-3.328l-59.392-59.392 87.296-23.552z m156.16-156.16l-81.152 21.76 23.296-87.04 59.392 59.392a40.96 40.96 0 0 1 3.328 3.84 12.8 12.8 0 0 1-4.096 2.56z"
                      fill="#FCC029"
                      class="jsx-907561223"
                    ></path>
                  </svg>
                  <div class="nav-title">综 艺</div>
                </div>
              </a>
            </div>
            <div class="nav">
              <a href="/list?category=热播纪录片" rel="noreferrer">
                <div class="nav-block">
                  <svg
                    id="bili-tebietuijian"
                    viewBox="0 0 1024 1024"
                    class="home-icon"
                  >
                    <path
                      d="M215.04 153.6h593.92c33.93024 0 61.44 27.50976 61.44 61.44v643.3792a30.72 30.72 0 0 1-45.96224 26.6752L512 706.56l-312.43776 178.5344A30.72 30.72 0 0 1 153.6 858.4192V215.04c0-33.93024 27.50976-61.44 61.44-61.44z"
                      fill="#9696ED"
                      class="jsx-907561223"
                    ></path>
                    <path
                      d="M512 555.392l-90.05056 46.60736a19.27168 19.27168 0 0 1-27.84256-20.41856l17.12128-98.2784-72.2432-69.32992a19.27168 19.27168 0 0 1 10.61376-32.98304l100.1216-14.32064 45.05088-89.8816a19.27168 19.27168 0 0 1 34.4576 0l45.05088 89.8816 100.11648 14.32064a19.27168 19.27168 0 0 1 10.61888 32.98304l-72.2432 69.32992 17.12128 98.2784a19.27168 19.27168 0 0 1-27.84768 20.41856L512 555.392z"
                      fill="#FFD778"
                      class="jsx-907561223"
                    ></path>
                  </svg>
                  <div class="nav-title">纪录片</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="card border-shadow">
        <div class="card-content">
          <div id="movie" class="sort">
            <div class="movie-list-header">
              <a class="movie-list-more" href="/list?category=热门电影"
                >更多<span class="iconfont icon-detail"></span></a
              ><span class="movie-list-title">热门电影</span>
              <div class="movie-list-subject-block">
                <span
                  :class="[
                    'movie-list-subject',
                    filmTab === '' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas()"
                  >热门</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'jqp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('jqp')"
                  >剧情</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'dzp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('dzp')"
                  >动作</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'khp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('khp')"
                  >科幻</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'aqp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('aqp')"
                  >爱情</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'xjp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('xjp')"
                  >喜剧</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'kbp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('kbp')"
                  >恐怖</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'zzp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('zzp')"
                  >战争</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'fzp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('fzp')"
                  >犯罪</span
                ><span
                  :class="[
                    'movie-list-subject',
                    filmTab === 'jlp' ? 'filmActive' : '',
                  ]"
                  @click="getFilmDatas('jlp')"
                  >记录</span
                >
              </div>
            </div>
            <div class="movie-list-body">
              <div
                class="movie-list-item"
                v-for="item in filmDatas"
                :key="item.mid"
              >
                <a
                  :href="'/search?key=' + item.name"
                  target="_blank"
                  rel="noreferrer"
                >
                  <div class="movie-post-wrapper">
                    <div class="movie-post-lazyload"></div>
                    <img :src="item.poster" class="movie-post" />
                  </div>
                  <div class="movie-info">
                    <div class="movie-title">{{ item.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div id="tv" class="sort">
            <div class="movie-list-header">
              <a class="movie-list-more" href="/list?category=热播新剧"
                >更多<span class="iconfont icon-detail"></span></a
              ><span class="movie-list-title">热播新剧</span>
              <div class="movie-list-subject-block">
                <span
                  :class="[
                    'movie-list-subject',
                    varietyTab === '' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas"
                  >热门</span
                ><span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'dlj' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('dlj')"
                  >国产剧</span
                ><span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'mj' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('mj')"
                  >美剧</span
                ><span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'hj' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('hj')"
                  >韩剧</span
                ><span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'rj' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('rj')"
                  >日剧</span
                ><span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'gj' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('gj')"
                  >港剧</span
                >
                <span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'tj' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('tj')"
                  >台剧</span
                >
                <span
                  :class="[
                    'movie-list-subject',
                    varietyTab === 'tj2' ? 'filmActive' : '',
                  ]"
                  @click="getVarietyDatas('tj2')"
                  >泰剧</span
                >
              </div>
            </div>
            <div class="movie-list-body">
              <div
                class="movie-list-item"
                v-for="item in varietyDatas"
                :key="item.mid"
              >
                <a
                  :href="'/search?key=' + item.name"
                  target="_blank"
                  rel="noreferrer"
                >
                  <div class="movie-post-wrapper">
                    <div class="movie-post-lazyload"></div>
                    <img :src="item.poster" class="movie-post" />
                  </div>
                  <div class="movie-info">
                    <div class="movie-title">{{ item.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div id="anime" class="sort">
            <div class="movie-list-header">
              <a class="movie-list-more" href="/list?category=热播动漫"
                >更多<span class="iconfont icon-detail"></span></a
              ><span class="movie-list-title">热播动漫</span>
            </div>
            <div class="movie-list-body">
              <div
                class="movie-list-item"
                v-for="item in comicDatas"
                :key="item.mid"
              >
                <a
                  :href="'/search?key=' + item.name"
                  target="_blank"
                  rel="noreferrer"
                >
                  <div class="movie-post-wrapper">
                    <div class="movie-post-lazyload"></div>
                    <img :src="item.poster" class="movie-post" />
                  </div>
                  <div class="movie-info">
                    <div class="movie-title">{{ item.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div id="show" class="sort">
            <div class="movie-list-header">
              <a class="movie-list-more" href="/list?category=热播综艺"
                >更多<span class="iconfont icon-detail"></span></a
              ><span class="movie-list-title">热播综艺</span>
            </div>
            <div class="movie-list-body">
              <div
                class="movie-list-item"
                v-for="item in dramaDatas"
                :key="item.mid"
              >
                <a
                  :href="'/search?key=' + item.name"
                  target="_blank"
                  rel="noreferrer"
                >
                  <div class="movie-post-wrapper">
                    <div class="movie-post-lazyload"></div>
                    <img :src="item.poster" class="movie-post" />
                  </div>
                  <div class="movie-info">
                    <div class="movie-title">{{ item.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div id="documentry" class="sort">
            <div class="movie-list-header">
              <a class="movie-list-more" href="/list?category=热播纪录片"
                >更多<span class="iconfont icon-detail"></span></a
              ><span class="movie-list-title">热播纪录片</span>
            </div>
            <div class="movie-list-body">
              <div
                class="movie-list-item"
                v-for="item in documentaryDatas"
                :key="item.mid"
              >
                <a
                  :href="'/search?key=' + item.name"
                  target="_blank"
                  rel="noreferrer"
                >
                  <div class="movie-post-wrapper">
                    <div class="movie-post-lazyload"></div>
                    <img :src="item.poster" class="movie-post" />
                  </div>
                  <div class="movie-info">
                    <div class="movie-title">{{ item.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div id="top250" class="sort">
            <div class="movie-list-header">
              <a class="movie-list-more" href="/list?category=豆瓣Top250"
                >更多<span class="iconfont icon-detail"></span></a
              ><span class="movie-list-title">豆瓣Top250</span>
            </div>
            <div class="movie-list-body">
              <div
                class="movie-list-item"
                v-for="item in topDatas"
                :key="item.mid"
              >
                <a
                  :href="'/search?key=' + item.name"
                  target="_blank"
                  rel="noreferrer"
                >
                  <div class="movie-post-wrapper">
                    <div class="movie-post-lazyload"></div>
                    <img :src="item.poster" class="movie-post" />
                  </div>
                  <div class="movie-info">
                    <div class="movie-title">{{ item.name }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  layout: "default",
  data() {
    return {
      bannerDatas: [],
      filmDatas: [],
      varietyDatas: [],
      comicDatas: [],
      dramaDatas: [],
      documentaryDatas: [],
      topDatas: [],

      filmTab: "",
      varietyTab: "",
    };
  },
  mounted() {
    this.getBanner();
    this.getFilmDatas();
    this.getVarietyDatas();
    this.getComicDatas();
    this.getDramaDatas();
    this.getDocumentaryDatas();
    this.getTopDatas();
  },
  methods: {
    getBanner() {
      this.$axios.$get("/main/api/banner/").then((data) => {
        this.bannerDatas = data || [];
      });
    },
    getSearchByWord(word) {
      this.$axios
        .$get("/main/api/association/", { params: { word } })
        .then((data) => {
          this.filmDatas = data || [];
        });
    },
    getFilmDatas(tab = "") {
      this.filmTab = tab;
      this.$axios
        .$get("/main/api/film/", { params: { pn: 1, lm: 12, tab } })
        .then((data) => {
          this.filmDatas = data || [];
        });
    },
    getVarietyDatas(tab = "") {
      this.varietyTab = tab;
      this.$axios
        .$get("/main/api/variety/", { params: { pn: 1, lm: 12, tab } })
        .then((data) => {
          this.varietyDatas = data || [];
        });
    },
    getComicDatas() {
      this.$axios
        .$get("/main/api/comic/", { params: { pn: 1, lm: 12 } })
        .then((data) => {
          this.comicDatas = data || [];
        });
    },
    getDramaDatas() {
      this.$axios
        .$get("/main/api/drama/", { params: { pn: 1, lm: 12 } })
        .then((data) => {
          this.dramaDatas = data || [];
        });
    },
    getDocumentaryDatas() {
      this.$axios
        .$get("/main/api/documentary/", { params: { pn: 1, lm: 12 } })
        .then((data) => {
          this.documentaryDatas = data || [];
        });
    },
    getTopDatas() {
      this.$axios
        .$get("/main/api/top/", { params: { pn: 1, lm: 12 } })
        .then((data) => {
          this.topDatas = data || [];
        });
    },
    goToSearch(key) {
      this.$router.push({
        name: "search-key",
        query: {
          key,
        },
      });
    },
  },
};
</script>

<style>
.el-carousel__container {
  position: relative;
  height: 300px;
}

.el-carousel__container img {
  width: 100%;
}

.card {
  margin-top: 15px;
  width: 100%;
  min-height: 0;
  padding: 5px 10px 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.border-shadow {
  box-shadow: 0 8px 33px 0 rgb(30 35 42 / 5%);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.card-content {
  box-sizing: border-box;
}
.home-nav,
.nav {
  display: flex;
  align-items: center;
}
.home-nav {
  height: 55px;
  width: 100%;
  font-size: 15px;
}
.nav {
  width: 50%;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}
a {
  color: #175199;
  text-decoration: none;
  outline-style: none;
  cursor: pointer;
}

.search-result-container,
.sort {
  margin-top: 20px;
}

.movie-list-header {
  width: 100%;
  margin: 0 -10px;
  padding: 0 10px;
  background: hsla(0, 0%, 100%, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
}

.movie-list-more {
  float: right;
  padding: 2px 6px 2px 10px;
  margin-top: 10px;
  align-items: center;
  cursor: pointer;
  text-align: center;
  border: 1px solid silver;
  border-radius: 2px;
  font-size: 14px;
  color: #505050;
  transition: all 0.2s;
  line-height: 14px;
}

.movie-list-more .iconfont {
  font-size: 15px;
}

.movie-list-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 2;
}

.movie-list-subject-block {
  white-space: nowrap;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 3px;
}

.movie-list-subject {
  font-size: 17px;
  padding: 4px 8px;
  margin-right: 10px;
  background: #f3f3f4;
  border-radius: 15px;
  white-space: nowrap;
  line-height: 2.2;
  box-sizing: border-box;
  cursor: pointer;
}
.movie-list-subject {
  font-size: 16px;
  padding: 4px 8px;
  margin-right: 10px;
  background: #f3f3f4;
  border-radius: 15px;
  white-space: nowrap;
  line-height: 2.2;
  box-sizing: border-box;
  cursor: pointer;
}

.search-result-container,
.sort {
  margin-top: 20px;
}

.movie-list-item {
  width: 14.6667%;
  padding: 10px 1% 3px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
}

.movie-list-body {
  display: flex;
  flex-wrap: wrap;
  background: none;
  line-height: 100%;
  margin: 0 -1% -8px;
  box-sizing: border-box;
}

.movie-post-wrapper {
  position: relative;
  overflow: hidden;
  color: transparent;
}

.movie-post-lazyload {
  padding-top: 140%;
  background: url()
    50% / cover no-repeat;
  border-radius: 8px;
}

.filmActive,
.filmActive:hover {
  color: #fff;
  background: #2fb3db;
}

.movie-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.9);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.movie-post {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  -o-object-fit: cover;
  object-fit: cover;
}
.el-rate__item {
  font-size: 0;
  vertical-align: middle;
}
.el-rate__icon,
.el-rate__item {
  position: relative;
  display: inline-block;
}
.el-rate {
  height: 32px;
  line-height: 1;
}
.el-rate__icon {
  font-size: 24px;
  margin-right: 6px;
  color: #c0c4cc;
}
@media screen and (max-width: 800px) {
  .el-carousel__container {
    position: relative;
    height: 180px;
  }
  .movie-list-item {
    width: 31.3333%;
    padding: 10px 1% 10px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
  }
  .el-rate {
    height: 30px;
  }
  .el-rate__icon {
    font-size: 8px;
    margin-right: 0;
  }
}
</style>
